<template>
  <Modal v-model="modal" :title="title">
    <div class="ht400 scroll">
      <Form :label-width="80">
        <Row class="pr">
          <Col span="24">
            <FormItem label="省份">
               <AreaSelect  :onlyProvince='true' @input="onSelectChange" />
            </FormItem>
          </Col>
        </Row>
        <Row class="pr">
          <Col span="24">
            <FormItem label="经销商">
             <SelectList ref="dealerList" listType='dealerList' @input="onSelectDealer" />
            </FormItem>
          </Col>
        </Row>
        <Row class="pr">
          <Col span="24">
            <FormItem label="维护人">
              <SelectList @input="onChange" listType='selfList' :selfList='roleList' />
            </FormItem>
          </Col>
        </Row>
        <Row class="pr">
          <Col span="24">
            <FormItem label="签约品牌">
              <RadioGroup v-model="resignBrand" @on-change='onSelectBrand'>
                <Radio v-for="item in brandList" :key="item.currentBrandId" :label="item">{{item.currentBrandName}}</Radio>
              </RadioGroup>
            </FormItem>
          </Col>
        </Row>
        <Row class="pr">
          <Col span="24">
            <FormItem label="关联品牌">
              <CheckboxGroup v-model="resignBrandGl" @on-change='onSelectGl'>
                <Checkbox v-for="item in brandListNotSelect" :key="item.currentBrandId" :label="item">{{item.currentBrandName}}</Checkbox>
              </CheckboxGroup>
            </FormItem>
          </Col>
        </Row>
      </Form>
    </div>
    <div slot="footer">
        <Button @click="modal = false" size="large" type="text">取消</Button>
        <Button @click="onSave" type="primary" size="large">确认</Button>
    </div>
</Modal>
</template>
<script>
import AreaSelect from "~/AreaSelect";
import SelectList from "~/SelectList";
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      id: null,
      modal: false,
      title: '更改经销商',
      resignBrand: '',
      resignBrandGl: '',
      distributorId: '',
      brand: '',
      loading: false,
      brandList: [],
      roleList: [],
      selectedRole: {},
    };
  },
  computed: {
    brandListNotSelect() {
      return this.brandList.filter(item => {
        return item.currentBrandId != this.resignBrand.currentBrandId
      })
    },
    ...mapGetters([
       'dealerList'
    ]),
  },
  components: {
    AreaSelect,
    SelectList
  },
  methods: {
    onChange(v) { // 选择门店维护人
      const item = this.roleList.find(item => item.id == v)
      this.selectedRole = item
    },
    onSelectGl() { // 选择关联品牌时
      if (!this.resignBrand) {
        this.$Message.info('请先选择签约品牌')
        this.resignBrandGl = []
      }
    },
    onSelectBrand() {
      this.resignBrandGl = []
    },
    onSelectChange(val) {
      let obj = {
        provinceId: val,
        isPage: false,
        current: 1,
        size: 10000
      }
      this.$refs.dealerList.getListDispath('getDealerList', obj)
    },
    onSelectDealer(val){
      this.resignBrand = ''
      this.resignBrandGl = []
      this.distributorId = val
      this.$ajaxGet('/distributor/contract/getContractBrands', { distributorId: val }).then(res => {
        this.brandList = res
      })
      this.getRoleList({ distributorId: val })
    },
    getRoleList(params) {
      this.$ajaxGet('/distributor_salesman/listSalesman', params).then(res => {
        let arr = []
        res.forEach(item => {
          item.value = item.id
          item.text = item.realname
          if (!arr.find(a => a.id === item.id)) {
            arr.push({ ...item })
          }
        })
        this.list = arr
        this.roleList = arr
      })
    },
    onSave() {
      let distributor = this.dealerList.find(item => item.distributorId == this.distributorId)
      this.$emit('change-dealer', distributor, this.resignBrand, this.resignBrandGl, this.selectedRole)
      this.closeModal()
    },
    openModal() {
      this.modal = true;
    },
    closeModal() {
      this.modal = false;
    },
     
  }
}
</script>

